import Base from "../base.js";
import SchedulesService from "../../service/SchedulesService.js"
export default class extends Base {
  constructor(props) {
    super(props);
    this.time = null;
  }
  render() {
    const template = `
              <from class="layui-form" action=""  style="padding-top:100px ;">
                    <div class="layui-form-item">
                    <label class="layui-form-label">电影</label>
                    <div class="layui-input-inline">
                      <select name="movieId" lay-verify="required" lay-filter="moves">
                      </select>
                    </div>
                  </div>     
                    <div class="layui-form-item">
                    <label class="layui-form-label">影院</label>
                    <div class="layui-input-inline">
                      <select name="cinemasId" lay-verify="required"  lay-filter="cinemas">
                      </select>
                    </div>
                  </div>     
                    <div class="layui-form-item">
                    <label class="layui-form-label">放映厅</label>
                    <div class="layui-input-inline">
                      <select name="theaterId" lay-verify="required"  lay-filter="theaters">
                      </select>
                    </div>
                  </div>     
                  <div class="layui-form-item">
                  <label class="layui-form-label">上映时间</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" lay-verify="required" name="showTime" id="test5" placeholder="年，月，日">
                  </div>
                  </div> 
                <div class="layui-form-item" style="margin-top:15px">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline addTheaters" style="width:300px">
                  <input type="text" name="price" lay-verify="required" placeholder="请输入价格" class="layui-input layui-input-inline">
                </div>
              </div>
                <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="subBtn">立即提交</button>
                </div>
              </div>
              </from>
              <div id="test1"></div>
        `
    this.$el.html(template);
  }
  layui() {

    this.form.render()
    this.laydate.render({
      elem: '#test5'
      , type: 'datetime',
      min:`${new Date()}`
    })
  }
  //获取电影数据
  async getMovies() {
    const data = await SchedulesService.getMovies();
    this.moviesRender(data);
  }
  //获取影院数据
  async getCinems() {
    const data = await SchedulesService.getCinems();
    this.cinemsRender(data);
  }
  //获取放映厅数据
  async getTheater(cinemasId) {
    const data = await SchedulesService.getTheaters(cinemasId);
    this.theaterRender(data);
  }

  //渲染影院

  cinemsRender(data) {
    const initOption = `<option value="">请选择影院</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.name}<option>`, initOption
    );
    $(`select[name=cinemasId]`).html(option);
    this.form.render();
  };




  //渲染电影



  moviesRender(data) {
    const initOption = `<option value="">请选择电影</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.cname}<option>`, initOption
    );
    $(`select[name=movieId]`).html(option);
    this.form.render();
  };



  //渲染放映厅

  theaterRender(data) {
    const initOption = `<option value="">请选择放映厅</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.name}<option>`, initOption
    );
    $(`select[name=theaterId]`).html(option);
    this.form.render();
  };



  //添加事件
  async getById(listname, _id) {
    return await SchedulesService.getById(listname, _id)
  }

  handle() {
    let that = this
    // 选择电影时触发的事件，发送ajax 获取该电影能放映的影院
    this.form.on('select(moves)', async function (data) {
      that.oneTitle = this.innerHTML
      var template = `
        <div class="layui-collapse" lay-filter="test">
         <div class="layui-colla-item">
         <h2 class="layui-colla-title" data-id="${data.value}">${that.oneTitle}(查看正在放映电影院)</h2>
         <div class="layui-colla-content">
        </div>
      `
      $("#test1").html(template)
      layui.element.render()
    });
    this.element.on('collapse(test)', async function(data){
      if (data.show) {
        var _id=data.title.attr("data-id")
        that.newSet = new Set();
        that.listData = await that.getById("movieId",_id)
        that.listData = that.listData.filter(v=>v.cinemasId);
        that.listData.forEach(v => {
          that.newSet.add(v.cinemasId.name);
        })
        var template=""
        that.newSet.forEach(v=>{
          template+=`
          <div  class="palyer" style="    margin-top: 6px;"><span>${v}</span>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" style="float: right;">查看正在放映影厅</button>
        </div>
          `
        })
        $(".layui-colla-content").html(template)
      layui.element.render()
      //给所有按钮添加点击影厅
     $(".palyer button").on("click",function(){
        let cinemanmae=$(this).prev().text();
        let  newAry=that.listData.filter(v=>v.cinemasId.name==cinemanmae)
        SchedulesService.setSchedulesData("_theaters",newAry)
        location.hash="#/info/moveTheaterList"
     })
      }
    });
    //选择影院时的事件，发送ajax 获取该影厅能放映的放映厅     
    this.form.on('select(cinemas)', function (data) {
      that.getTheater(data.value)
    });
    //选择放映厅的事件    
    this.form.on('select(theaters)', function (data) {
     
 
      
    });
    //提交按钮点击后触发的事件
    this.form.on('submit(subBtn)',async function (data) {
      that.addSchedules(data.field)
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  }
  //新增排片
  async addSchedules(data) {
    const result = await SchedulesService.add(data)
    if (result) {
      const seats=await this.getSeatByTheaterId(result.theaterId)
      const dataAry=[]
      seats.forEach(v => {
        dataAry.push({
          scheduleId:result._id,
          seatId:v._id
        })
      });
     this.addSeating(dataAry)
      layui.layer.msg("已成功添加排片")
    } else {
      layui.layer.msg("排片重复，请重新排片")
    }
  }

  // 添加座位
  async addSeating(data){
   await SchedulesService.addSeating(data)
  }
  //获取座位
  async getSeatByTheaterId(data){
   return await SchedulesService.getSeatByTheaterId(data)
  }
  mounted() {
    this.getMovies()
    this.getCinems()
  }
}
